<template>
  <div class="login">
    <p class="l_title">欢迎登录商城</p>
    <div class="l_login_box">
      <van-icon class="manager_icon" name="manager" size="18" />
      <input type="text" v-model="acc" placeholder="请输入用户名" />
      <van-icon class="lock_icon" name="lock" size="18" />
      <input type="password" v-model="pwd" placeholder="请输入密码" />
      <!-- 登录 -->
      <van-button
        type="primary"
        size="normal"
        block
        :loading="isLoading"
        loading-text="登录中..."
        @click="loginFun"
        >立即登录</van-button
      >
      <!-- 操作 -->
      <p class="l_login_box_operate">
        <span>系统帮助</span>
        <span @click="to_register">免费注册</span>
      </p>
    </div>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "login",
  data() {
    return {
      isLoading: false, //loading
      acc: "15282003029", //账号
      pwd: "123", //密码
    };
  },
  mounted() {},
  methods: {
    //  登录方法
    loginFun() {
      if (this.acc === "" || this.pwd === "") {
        return this.$notify({ type: "warning", message: "请输入用户名和密码" });
      }
      this.isLoading = true;
      SERVE.authLogin({params:{ yhm: this.acc, mm: this.pwd }})
        .then((res) => {
          this.isLoading = false;
          if (res.data.zt === "yes") {
            // 成功
            window.localStorage.setItem("u_login", res.data.zt);
            window.localStorage.setItem("u_id", res.data.uid);
            this.$router.push("/index")
          } else {
            return this.$notify({ message: res.data.xinxi });
          }
        })
        .catch(() => {
          this.isLoading = false;
        });
    },
    // 去注册
    to_register(){
        this.$router.push("/register")
    }
  },
};
</script>

<style lang="scss" scoped>
.login {
  display: inline-block;
  width: 100%;
  height: 100vh;
  background-color: #5b5b5b;
  color: white;
  padding: 0 15px;
  box-sizing: border-box;
  .l_title {
    margin: 30% 0 30px;
    font-size: 22px;
    text-align: center;
  }
  .l_login_box {
    width: 90%;
    margin: 0 auto;
    position: relative;
    input {
      width: 100%;
      height: 36px;
      margin-bottom: 30px;
      background-color: #a8a8a8;
      border-radius: 4px;
      padding-left: 40px;
      box-sizing: border-box;
      border: none;
      outline: none;
      &::-webkit-input-placeholder{
        color: #fff;
      }
    }
    .manager_icon {
      position: absolute;
      left: 11px;
      top: 9px;
    }
    .lock_icon {
      position: absolute;
      left: 11px;
      top: 75px;
    }
    .l_login_box_operate {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
    }
  }
}
</style>
